<template>
	<view class="seckill" v-if="advList.length>0">
		<view class="limitCard">
			<swiper 
				class="swiper" 
				:autoplay="true"  
				:circular="true"
				:interval="6000"
				>
				<swiper-item v-for="item in adv.left" :key="item.id">
					<image class="shopImg" :src="imgH+item.img"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="right-side">
			<view class="selected-card">
				<swiper
					class="swiper" 
					:autoplay="true"
					:circular="true"
					:interval="7000">
					<swiper-item v-for="item in adv.rightTop" :key="item.id">
						<image class="selected-card-img" :src="imgH+item.img" ></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="bottom-side">
				<view class="dayCard">
					<swiper
						class="swiper" 
						:autoplay="true"
						:circular="true"
						:interval="8000">
						<swiper-item v-for="item in adv.buttonLeft" :key="item.id">
							<image class="dailyImg" :src="imgH+item.img"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="popCard">
					<swiper
						class="swiper" 
						:autoplay="true"
						:circular="true"
						:interval="9000">
						<swiper-item v-for="item in adv.buttonRight" :key="item.id">
							<image class="popImg" :src="imgH+item.img"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'u-Seckill',
		data() {
			return {
				imgH:'http://images.zmzpl.com/',
			};
		},
		props:{
			advList:{
				type:Array,
				default:[]
			}
		},
		computed:{
			adv(){
				let temp = {left:[],rightTop:[],buttonLeft:[],buttonRight:[]}
				this.advList.forEach(item=>{
					if (item.type==3){
						temp.left.push(item)
					}
					if (item.type==4){
						temp.rightTop.push(item)
					}
					if (item.type==5){
						temp.buttonLeft.push(item)
					}
					if (item.type==6){
						temp.buttonRight.push(item)
					}
				})
				return temp
			}
		}
	}
</script>

<style scoped lang="scss">
.seckill{
	width: 100%;
	margin-top: 23rpx;
	padding:0 30rpx;
	display: flex;
	justify-content: space-between;
	.swiper{
		overflow: hidden;
		height: 100%;
		width: 100%;
	}
	.limitCard{
		width: 271rpx;
		height: 353rpx;
		position: relative;
		overflow: hidden;
		// background-color: #0081FF;
		.shopImg{
			width: 100%;
			height: 100%;
		}
		.suspension{
			top: 29rpx;
			left: 21rpx;
			.susTop{
				display: flex;
			}
			.limitTitle{
				width: 92rpx;
				height: 30rpx;
				margin-right: 9rpx;
			}
			.limitText{
				color: #FF8182;
				padding-left: 10rpx;
				border-left: 1rpx dashed #FF8182;
			}
		}
		
	}
	.text{
		font-size: 24rpx;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
	}
	.right-side{
		// margin-left: 9rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 410rpx;
		.selected-card{
			overflow: hidden;
			position: relative;
			width:410rpx;
			height: 167rpx;
			.selected-card-img{
				width:410rpx;
				height: 167rpx;
			}
			.suspension{
				top: 28rpx;
				left: 20rpx;
				.sus-title{
					color: #AD42F3;
				}
				.sus-describe{
					color: #CD92F7;
				}
				
			}
		}
		.bottom-side{
			display: flex;
			justify-content: space-between;
			width:410rpx;
			height: 176rpx;
			.dailyImg,.popImg{
				width: 200rpx;
				height: 176rpx;
			}
			.dayCard,.popCard{
				overflow: hidden;
				position: relative;
				width: 200rpx;
				height: 176rpx;
			}
			.dayCard{
				.suspension{
					top: 25rpx;
					left: 19rpx;
					.sus-title{
						color: #427BF9;
					}
					.sus-describe{
						color: #427CF9;
					}
				}
			}
			.popCard{
				.suspension{
					top: 25rpx;
					left: 23rpx;
					.sus-title{
						color: #FF6C1A;
					}
					.sus-describe{
						color: #FF6C1A;
						opacity:0.5;
					}
				}
			}
		}
	}
	
}
</style>
